<script setup lang="ts">

</script>

<template>
  <div class="index">
    <div class="header-bg">
      <div class="header-nav">
        <div class="back-btn">
          <img src="../assets/img/back-btn.png" alt="" srcset="">
        </div>

        <div class="title">
          来点
        </div>
        <div class="back-btn">

        </div>

      </div>
      <div class="header-search">
        <div class="search-img">
          <img src="../assets/img/icon-search.png" alt="" srcset="">
        </div>
        <div class="search-input">
          <input type="text" placeholder="输入你想要的的东西">
        </div>
      </div>
      <!-- 金刚区 -->
      <div class="navigation-box">
        <div class="navigation">
          <div class="item">
            <img src="../assets/img/first-canteen.png" alt="" srcset="">
            <div class="text">第一食堂</div>
          </div>
          <div class="item">
            <img src="../assets/img/second-canteen.png" alt="" srcset="">
            <div class="text">第二食堂</div>
          </div>
          <div class="item">
            <img src="../assets/img/fresh-fruit.png" alt="" srcset="">
            <div class="text">生鲜水果</div>
          </div>
          <div class="item">
            <img src="../assets/img/supermarket.png" alt="" srcset="">
            <div class="text">校园超市</div>
          </div>
          <div class="item">
            <img src="../assets/img/fruit-juice.png" alt="" srcset="">
            <div class="text">奶茶果汁</div>
          </div>
        </div>
      </div>

    </div>
    <!-- 公告区 -->
    <div class="announcement">
      <div>平台</div>
      <div>公告</div>
      <div>第一食堂经过两年半研制隆重推出全只因宴 2024.05.22</div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <img src="../assets/img/banner1.png" alt="" srcset="">
    </div>

    <!-- 排序 -->
    <div class="sorting">
      <div>综合排序
        <img class="icon" src="../assets/img/icon-right.png" alt="" srcset="">
      </div>
      <div class="item">销量</div>
      <div class="item">星级</div>
      <div class="item">距离</div>
    </div>

    <div class="goods-box">
      <div class="goods-item">
        <div class="left">
          <img src="../assets/img/goods-img1.png" alt="" srcset="">
        </div>
        <div class="right">
          <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
          <div class="grade">
            <div>4.9分</div>
            <div>月售401</div>
          </div>
          <div class="order">
            <div>起送¥17 配送¥3</div>
            <div>10分钟丨500m</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.index {
  width: 10rem;
  margin: 0 auto;

  .header-bg {
    width: 10rem;
    height: 5.28rem;
    background: linear-gradient(180deg, rgba(0, 116, 255, 1) 12.5%, rgba(133, 188, 255, 1) 100%);

    .header-nav {
      display: flex;
      height: 1.1733rem;
      align-items: center;
      justify-content: space-between;

      .back-btn {
        width: .7467rem;
        height: .7467rem;
        margin-left: .4267rem;

        img {
          display: block;
          width: .7467rem;
          height: .7467rem;
        }
      }

      .title {
        font-size: .48rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }

    .header-search {
      width: 9.1467rem;
      height: .8rem;
      border-radius: .4rem;
      background: rgba(255, 255, 255, 0.84);
      display: flex;
      margin: .32rem auto .4rem auto;

      .search-img {
        width: .3733rem;
        height: .3733rem;
        margin-top: .2133rem;
        margin-left: .32rem;

        img {
          display: block;
          width: .3733rem;
          height: .3733rem;
        }
      }

      .search-input {
        width: 8rem;
        height: 0.8rem;
        margin-left: .2133rem;

        input {
          display: block;
          width: 8rem;
          height: 0.8rem;
          border: 0;
          background-color: rgba(0, 0, 0, 0);
          outline: 0;
          font-size: .3467rem;
          font-weight: 500;
          color: rgba(144, 152, 160, 1);

        }
      }
    }

    //金刚区
    .navigation-box {
      width: 10rem;
      background-color: white;
      border-top-left-radius: .4267rem;
      border-top-right-radius: .4267rem;
      padding-top: .5333rem;

      .navigation {
        width: 8.64rem;
        height: 2.0533rem;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .item {
          img {
            display: block;
            width: 1.28rem;
            height: 1.28rem;
          }

          .text {
            font-size: .32rem;
            font-weight: 500;
            line-height: .4635rem;
            color: rgba(46, 52, 58, 1);
            margin-top: .32rem;
          }
        }
      }
    }
  }



  //公告区
  .announcement {
    width: 9.1467rem;
    height: .7467rem;
    border-radius: .3733rem;
    background: rgba(248, 248, 248, 1);
    font-size: .32rem;
    display: flex;
    align-items: center;
    margin-top: .48rem;
    margin-bottom: .5333rem;
    margin-left: auto;
    margin-right: auto;


    div:first-child {
      color: rgba(0, 0, 0, 1);
      margin-left: .32rem;
    }

    div:nth-child(2) {
      color: rgba(37, 136, 255, 1);
    }

    div:last-child {
      font-weight: 500;
      color: rgba(46, 52, 58, 1);
      width: 6.6133rem;
      // 1.文本强制一行显示
      white-space: nowrap;
      // 2.溢出部分隐藏
      overflow: hidden;
      // 3.溢出部分使用省略号代替
      text-overflow: ellipsis;
      margin-left: .48rem;
    }
  }


  // 轮播图
  .banner {
    width: 9.1733rem;
    height: 2.4267rem;
    margin: 0 auto;

    img {
      display: block;
      width: 9.1733rem;
      height: 2.4267rem;
    }
  }

  // 排序筛选
  .sorting {
    width: 9.1733rem;
    color: black;
    font-size: .32rem;
    margin: .48rem auto;
    display: flex;

    div:first-child {
      color: rgba(37, 136, 255, 1);
      margin-right: 1.0933rem;
      position: relative;

      .icon {
        display: block;
        width: .16rem;
        height: .2667rem;
        position: absolute;
        top: .08rem;
        right: -0.4533rem;
        transform: rotate(90deg);

      }
    }

    .item {
      margin-right: .56rem;
    }
  }
}
</style>
